<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 传统的this指向问题 (this-> 函数内置关键词 -> 指向函数在调用时依存的对象)
    // 1. 普通函数(命名函数 匿名函数), 调用时,一般没有依存的对象this->window (严格模式undefined)
    // 2. 函数在调用时有依存的对象 属于谁 就指向谁  zhang.say   btn.onclick

    // 3. 箭头函数没有自己的this对象, 它的this依赖于父作用域的this指向(包裹箭头函数的作用域) 
    //    箭头函数里面根本没有自己的this，而是引用外层的this


    // 传统
    // function fn(){
    //     console.log(this);
    // }

    // var zhang = {
    //     name:"张三",
    //     age:18,
    //     say:function(){
    //         console.log(this.name,this.age);
    //     }
    // }

    // document.onclick = function(){
    //     console.log(this);
    // }


    // fn();
    // zhang.say();


    // ------------------------------------------------
    // 单层箭头函数
    var zhang = {
        name:"张三",
        age:18,
        say:()=>{
            console.log(this);
            console.log(this.name,this.age);
        }
    }

    document.onclick = () => {
        console.log(this);
    }

    fn();
    zhang.say();









</script>
</html>